<template>
  <div>
    <div class="box-1">
      <div class="box-top">
<!--        <div class="box-item">-->
<!--          <p class="title">我的优惠券</p>-->
<!--          <div class="money">-->
<!--            <i class="iconfont icon-shenqingfapiao"></i> 15 张-->
<!--          </div>-->
<!--          <div class="bottom">-->
<!--            <a href="javascript:void (0)">立即查看</a>-->
<!--          </div>-->
<!--        </div>-->
<!--        <div class="box-item">-->
<!--          <p class="title">我的收益</p>-->
<!--          <div class="money">-->
<!--            471.00 <i class="iconfont icon-VIPquanyi"/>-->
<!--          </div>-->
<!--          <div class="bottom">-->
<!--            <a href="javascript:void (0)">查看收支曲线</a>-->
<!--          </div>-->
<!--        </div>-->
        <div class="box-item-1">
<!--          <p class="title">我的权益</p>-->
          <div class="box-bottom">
            <div class="items">
              <p class="item-title">我的购买</p>
              <div class="btn">150</div>
            </div>
            <div class="items">
              <p class="item-title">我的收藏</p>
              <div class="btn">60</div>
            </div>
            <div class="items">
              <p class="item-title">预览文件</p>
              <div class="btn">70</div>
            </div>
            <div class="items">
              <p class="item-title">会员下载</p>
              <div class="btn">100</div>
            </div>
            <div class="items">
              <p class="item-title">已下载</p>
              <div class="btn">30</div>
            </div>
          </div>
          <div class="box-vip">
            <span><i class="iconfont icon-vip6"></i> VIP用户享用更多特权</span>
            <b>查看更多的权益 <i class="el-icon-s-promotion"/></b>
          </div>
        </div>
      </div>
      <div class="box-center-1">
        <div>
          <img src="@/assets/images/ad-h-8.png" alt="">
        </div>

      </div>
      <div class="record">
        <div class="left">
          <p class="title">下载记录</p>
          <el-table
              :data="tableData"
              border
              max-height="400px"
              style="width: 100%">
            <el-table-column prop="name" label="文档名称" show-overflow-tooltip></el-table-column>
            <el-table-column prop="date" label="购买时间" show-overflow-tooltip width="150"></el-table-column>
            <el-table-column prop="address" label="操作" width="80">
              <template slot-scope="{row}">
                <el-button size="mini" type="primary">下载</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="left">
          <p class="title">收藏记录</p>
          <el-table
              :data="tableData"
              border
              max-height="400px"
              style="width: 100%">
            <el-table-column prop="name" label="文档名称" show-overflow-tooltip></el-table-column>
            <el-table-column prop="date" label="购买时间" show-overflow-tooltip width="150"></el-table-column>
            <el-table-column prop="address" label="操作" width="100">
              <template slot-scope="{row}">
                <el-button size="mini" type="warning">去查看</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
          {date: '2016-05-02', name: '商务标书范本（3）'},
          {date: '2016-05-02', name: '商务标书范本（3）'},
          {date: '2016-05-02', name: '商务标书范本（3）'},
          {date: '2016-05-02', name: '商务标书范本（3）'},
          {date: '2016-05-02', name: '商务标书范本（3）'},
          {date: '2016-05-02', name: '商务标书范本（3）'},
          {date: '2016-05-02', name: '商务标书范本（3）'},
          {date: '2016-05-02', name: '商务标书范本（3）'},
          {date: '2016-05-02', name: '商务标书范本（3）'},
          {date: '2016-05-02', name: '商务标书范本（3）'},
          {date: '2016-05-02', name: '商务标书范本（3）'},
       ]
    }
  }
}
</script>

<style scoped lang="scss">
.box-1{
  width: 100%;
  .box-top{
    width: 100%;
    height: 150px;
    //background: url("@/assets/images/user-bgk.webp") no-repeat;
    background-size: contain;
    //margin-top: 20px;
    display: flex;
    .box-item{
      width: 250px;
      height: 180px;
      background: #fff;
      border-radius: 20px;
      //box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
      margin-left: 10px;
      background-image: linear-gradient(to left, #fff 0%, #fee140 100%);
      padding: 3%;
      box-sizing: border-box;
      position: relative;
      .title{
        font-size: 16px;
        font-family: 'OPPOR', sans-serif;
        color: #333;
      }
      .money{
        width: 100%;
        font-size: 30px;
        font-family: 'OPPOB', sans-serif;
        color: #333;
        margin-top: 10px;
        i{
          font-size: 22px;
        }
      }
      .bottom{
        width: 100%;
        height: 50px;
        font-size: 14px;
        display: flex;
        justify-content: center;
        align-items: center;
        position: absolute;
        bottom: 0;
        left: 0;
        a{
          display: flex;
          justify-content: center;
          align-items: center;
          height: 50px;
          font-size: 14px;
          width: 100%;
          background: rgba(242,133,8,0.2);
          color: #fff;
          border-radius: 0 0 20px 20px;
        }
      }
    }
    .box-item-1{
      width:100%;
      height: 150px;
      background-image: linear-gradient(to left, #fff 0%, #fee140 100%);
      margin-left: 10px;
      //border-radius: 20px;
      //box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
      padding: 3%;
      box-sizing: border-box;
      position: relative;
      .title{
        font-size: 16px;
        font-family: 'OPPOR', sans-serif;
        color: #333;

      }
      .box-bottom{
        width: 100%;
        height: 60px;

        font-family: 'OPPOL', sans-serif;
        //border-top: 1px solid #fda279;
        padding: 10px 0 0 0;
        display: flex;
        justify-content: space-between;
        .items{
          height: 60px;
          text-align: center;
          .item-title{
            font-size: 14px;
            color: #333;
          }
          .btn{
            font-size: 18px;
            margin-top: 15px;
            color: #333;
            font-family: 'OPPOB', sans-serif;
          }
        }
      }
      .box-vip{
        width: 100%;
        height: 50px;
        position: absolute;
        bottom: 0;
        left: 0;
        //border-radius: 0 0 20px 20px;
        background: rgba(242,133,8,0.2) ;
        color: #fff;
        display: flex;
        align-items: center;
        padding: 0 3%;
        box-sizing: border-box;
        justify-content: space-between;
        span{
          display: flex;
          align-items: center;
          font-size: 14px;
          i{
            font-size: 24px;
          }
        }
        b{
          font-size: 14px;
        }
      }
    }
  }
  .box-center-1{
    width: 100%;
    height: 100px;
    margin-top: 20px;
    padding: 0 1%;
    box-sizing: border-box;
    div{
      height: 100px;
      //box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
      width: 100%;
      border-radius: 20px;
      img{
        width: 100%;
        height: 100px;
        border-radius: 20px;
        object-fit: contain ;
      }
    }

  }
  .record{
    width: 100%;
    min-height: 500px;
    display: flex;
    justify-content: space-between;
    margin-top: 20px;
    box-sizing: border-box;
    .left{
      box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
      width: 100%;
      padding: 3%;
      box-sizing: border-box;
      border-radius: 20px;
      margin: 0 10px;
      .title{
        font-family: 'OPPOB', sans-serif;
        font-size: 16px;
        margin-bottom: 20px;
      }
    }
  }
}
</style>